<template>
  <div class="statistics-container">
    <el-card>
      <div slot="header">
        <span>族谱统计分析</span>
      </div>
      
      <el-row :gutter="20">
        <!-- 基础统计卡片 -->
        <el-col :span="6" v-for="(stat, index) in basicStats" :key="index">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 性别分布 -->
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header">
              <span>性别分布</span>
            </div>
            <div id="genderChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        
        <!-- 世代分布 -->
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header">
              <span>世代分布</span>
            </div>
            <div id="generationChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 年龄分布 -->
        <el-col :span="24">
          <el-card shadow="hover">
            <div slot="header">
              <span>年龄分布</span>
            </div>
            <div id="ageChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatistics } from '@/api/member'

export default {
  name: 'Statistics',
  data() {
    return {
      basicStats: [
        { label: '总成员数', value: 0, icon: 'el-icon-user' },
        { label: '在世成员', value: 0, icon: 'el-icon-user-solid' },
        { label: '男性成员', value: 0, icon: 'el-icon-male' },
        { label: '女性成员', value: 0, icon: 'el-icon-female' }
      ],
      genderChart: null,
      generationChart: null,
      ageChart: null,
      loading: false
    }
  },
  
  async mounted() {
    await this.loadStatistics()
    this.initCharts()
  },
  
  methods: {
    async loadStatistics() {
      this.loading = true
      try {
        const res = await getStatistics()
        if (res) {
          // 更新基础统计数据
          this.basicStats[0].value = res.totalMembers || 0
          this.basicStats[1].value = res.livingMembers || 0
          this.basicStats[2].value = res.maleMembers || 0
          this.basicStats[3].value = res.femaleMembers || 0
          
          // 更新图表数据
          this.genderData = res.genderDistribution || []
          this.generationData = res.generationDistribution || []
          this.ageData = res.ageDistribution || []
        }
      } catch (error) {
        this.$message.error('加载统计数据失败')
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    
    initCharts() {
      this.$nextTick(() => {
        this.initGenderChart()
        this.initGenerationChart()
        this.initAgeChart()
      })
    },
    
    initGenderChart() {
      const chartDom = document.getElementById('genderChart')
      if (!chartDom) return
      
      this.genderChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '性别分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.genderData.length > 0 ? this.genderData : [
              { value: 0, name: '男性' },
              { value: 0, name: '女性' }
            ]
          }
        ]
      }
      this.genderChart.setOption(option)
    },
    
    initGenerationChart() {
      const chartDom = document.getElementById('generationChart')
      if (!chartDom) return
      
      this.generationChart = echarts.init(chartDom)
      
      // 处理世代数据
      const generationLabels = []
      const generationValues = []
      if (this.generationData && this.generationData.length > 0) {
        this.generationData.forEach(item => {
          generationLabels.push(`第${item.generation}代`)
          generationValues.push(item.count)
        })
      }
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: generationLabels.length > 0 ? generationLabels : ['第1代', '第2代', '第3代', '第4代', '第5代', '第6代']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '成员数',
            type: 'bar',
            data: generationValues.length > 0 ? generationValues : [0, 0, 0, 0, 0, 0]
          }
        ]
      }
      this.generationChart.setOption(option)
    },
    
    initAgeChart() {
      const chartDom = document.getElementById('ageChart')
      if (!chartDom) return
      
      this.ageChart = echarts.init(chartDom)
      
      // 处理年龄数据
      const ageLabels = []
      const ageValues = []
      if (this.ageData && this.ageData.length > 0) {
        this.ageData.forEach(item => {
          ageLabels.push(item.name)
          ageValues.push(item.value)
        })
      }
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ageLabels.length > 0 ? ageLabels : ['0-10岁', '11-20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-70岁', '71-80岁', '80岁以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人数',
            type: 'line',
            smooth: true,
            data: ageValues.length > 0 ? ageValues : [0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      }
      this.ageChart.setOption(option)
    }
  },
  
  beforeDestroy() {
    if (this.genderChart) {
      this.genderChart.dispose()
    }
    if (this.generationChart) {
      this.generationChart.dispose()
    }
    if (this.ageChart) {
      this.ageChart.dispose()
    }
  }
}
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}
</style> 